<template>
    <el-drawer
            :size="!FormMode?'94%':'30%'"
            :title="drawerTitle"
            v-bind="$attrs"
            v-on="$listeners"
            @close="cancelSubmit"
            direction="rtl"
            :before-close="handleClose">
        <el-form ref="form" :model="form" label-width="26px"   class="myForm" v-if="FormMode">
            <el-form-item v-if="componentName === 'NY'">
                <VonSelect v-model="form.powerSelection" label="电源选择" width="80%" :options ="powerSelectionOptions"></VonSelect>
            </el-form-item>
            <el-form-item v-if="componentName === 'NY'">
                <VonBDUInputHorizon v-model="form.voltage" label="耐压测试电压"  append="V"></VonBDUInputHorizon>
            </el-form-item>
            <el-form-item v-if="componentName === 'JY'">
                <VonBDUInputHorizon v-model="form.voltage" label="绝缘测试电压" append="V"></VonBDUInputHorizon>
            </el-form-item>
            <el-form-item v-if="componentName === 'NY' || componentName === 'JY'">
                <VonBDUInputHorizon v-model="form.climbTime" label="爬升时间" append="S"></VonBDUInputHorizon>
            </el-form-item>
            <el-form-item v-if="componentName === 'JY'">
                <VonBDUInputHorizon v-model="form.testTime" label="绝缘测试时间"  append="S"></VonBDUInputHorizon>
            </el-form-item>
            <el-form-item v-if="componentName === 'JY'">
                <VonBDUInputHorizon v-model="form.resistanceLower" label="绝缘电阻下限"  append="MΩ"></VonBDUInputHorizon>
            </el-form-item>
            <el-form-item v-if="componentName === 'NY'">
                <VonBDUInputHorizon v-model="form.testTime" label="耐压测试时间"  append="S"></VonBDUInputHorizon>
            </el-form-item>
            <el-form-item v-if="componentName === 'NY'">
                <VonBDUInputHorizon v-model="form.currentUpper" label="漏电流上限"  append="ms"></VonBDUInputHorizon>
            </el-form-item>

            <el-form-item v-if="componentName === 'CAN' || componentName === 'HE'">
                <VonBDUInputHorizon v-model="form.current" label="电流"  append="A"></VonBDUInputHorizon>
            </el-form-item>
            <el-form-item v-if="componentName === 'HE'|| componentName === 'YJ'">
                <VonBDUInputHorizon v-model="form.voltageUpper" label="电压上限"  append="V"></VonBDUInputHorizon>
            </el-form-item>
            <el-form-item v-if=" componentName === 'HE'|| componentName === 'YJ'">
                <VonBDUInputHorizon v-model="form.voltageLower" label="电压下限"  append="V"></VonBDUInputHorizon>
            </el-form-item>

            <el-form-item v-if="componentName === 'CAN'">
                <VonBDUInputHorizon v-model="form.currentUpper" label="电流上限(A)"  append="A"></VonBDUInputHorizon>
            </el-form-item>
            <el-form-item v-if="componentName === 'CAN'">
                <VonBDUInputHorizon v-model="form.currentLower" label="电流下限(A)"  append="A"></VonBDUInputHorizon>
            </el-form-item>


            <!--耐压和绝缘都拿耐压的-->
            <el-form-item v-if="componentName === 'NY' || componentName === 'JY'">
                <VonBDUSelect v-model="form.pointA" label="检测A" width="80%" :options="PassageWays.NY" @change="changePointA"></VonBDUSelect>
            </el-form-item>
            <el-form-item v-if="componentName === 'JY' || componentName === 'NY'">
                <VonBDUInputHorizon v-model="form.wayA" label="通道A"  :options="PassageWays.NY" disabled></VonBDUInputHorizon>
            </el-form-item>
            <!--导通的用导通通道-->
            <el-form-item v-if="componentName === 'DT'">
                <VonBDUSelect v-model="form.pointA" label="检测点A" width="80%" :options="PassageWays.DT" @change="changePointA"></VonBDUSelect>
            </el-form-item>
            <el-form-item v-if="componentName === 'DT'">
                <VonBDUSelect v-model="form.pointB" label="检测点B" width="80%" :options="PassageWays.DT" @change="changePointB"></VonBDUSelect>
            </el-form-item>
            <el-form-item v-if="componentName === 'DT' ">
                <VonBDUInputHorizon v-model="form.wayA" label="通道A"  :options="PassageWays.DT"  disabled></VonBDUInputHorizon>
            </el-form-item>
            <el-form-item v-if="componentName === 'DT'">
                <VonBDUInputHorizon v-model="form.wayB" label="通道B"  :options="PassageWays.DT" disabled></VonBDUInputHorizon>
            </el-form-item>
            <!--压降，电阻，电容，霍尔，can都是用压降通道-->
            <el-form-item v-if="componentName === 'FN' || componentName === 'DR'|| componentName === 'HE'|| componentName === 'CAN'|| componentName === 'DZ'|| componentName === 'YJ'">
                <VonBDUSelect v-model="form.pointA" label="检测点A" width="80%" :options="PassageWays.YJ" @change="changePointA"></VonBDUSelect>
            </el-form-item>
            <el-form-item v-if="componentName === 'FN' || componentName === 'DR'|| componentName === 'HE'|| componentName === 'CAN'|| componentName === 'DZ'|| componentName === 'YJ'">
                <VonBDUSelect v-model="form.pointB" label="检测点B" width="80%" :options="PassageWays.YJ" @change="changePointB"></VonBDUSelect>
            </el-form-item>
            <el-form-item v-if="componentName === 'FN' || componentName === 'DR'|| componentName === 'HE'|| componentName === 'CAN'|| componentName === 'DZ'|| componentName === 'YJ' ">
                <VonBDUInputHorizon v-model="form.wayA" label="通道A"  :options="PassageWays.YJ" disabled></VonBDUInputHorizon>
            </el-form-item>
            <el-form-item v-if="componentName === 'FN'|| componentName === 'DR'|| componentName === 'HE'|| componentName === 'CAN'|| componentName === 'DZ'|| componentName === 'YJ'">
                <VonBDUInputHorizon v-model="form.wayB" label="通道B"  :options="PassageWays.YJ" disabled></VonBDUInputHorizon>
            </el-form-item>
            <el-form-item v-if="componentName === 'FN'|| componentName === 'DR'|| componentName === 'HE'|| componentName === 'CAN'|| componentName === 'DZ'|| componentName === 'YJ'">
                <VonBDUSelect2 v-model="form.RELAY1" label="继电器1" width="80%" :options="PassageWays.CG"></VonBDUSelect2>
            </el-form-item>
            <el-form-item v-if="componentName === 'FN'|| componentName === 'DR'|| componentName === 'HE'|| componentName === 'CAN'|| componentName === 'DZ'|| componentName === 'YJ'">
                <VonBDUSelect2 v-model="form.RELAY2" label="继电器2" width="80%" :options="PassageWays.CG"></VonBDUSelect2>
            </el-form-item>


            <el-form-item v-if="componentName === 'DR'">
                <VonBDUInputHorizon v-model="form.capacitanceUpper" label="电容上限"  append="F"></VonBDUInputHorizon>
            </el-form-item>
            <el-form-item v-if="componentName === 'DR'">
                <VonBDUInputHorizon v-model="form.capacitanceLower" label="电容下限"  append="F"></VonBDUInputHorizon>
            </el-form-item>
            <el-form-item v-if="componentName === 'DZ'">
                <VonBDUInputHorizon v-model="form.resistanceUpper" label="电阻上限"  append="Ω"></VonBDUInputHorizon>
            </el-form-item>
            <el-form-item v-if="componentName === 'DZ'">
                <VonBDUInputHorizon v-model="form.resistanceLower" label="电阻下限"  append="Ω"></VonBDUInputHorizon>
            </el-form-item>
            <el-form-item v-if="componentName === 'DZ'">
                <VonBDUInputHorizon v-model="form.resistanceMakeUp" label="电阻补偿"  append="Ω"></VonBDUInputHorizon>
            </el-form-item>
            <el-form-item v-if="componentName === 'DZ'">
                    <VonSelect v-model="form.mode" label="模式" width="80%" :options ="modeOptions"></VonSelect>
            </el-form-item>
            <el-form-item v-if="componentName === 'DT'">
                <VonSelect v-model="form.mode" label="模式" width="80%" :options="modeOptions2"></VonSelect>
            </el-form-item>

            <el-form-item v-if="componentName === 'CAN' ">
                <VonBDUInputHorizon v-model="form.pcbaAddress" label="pcba版本号" ></VonBDUInputHorizon>
            </el-form-item>
            <el-form-item v-if="componentName === 'CAN'">
                <VonBDUInputHorizon v-model="form.firmwareAddress" label="固件版本号" ></VonBDUInputHorizon>
            </el-form-item>
            <template v-if="componentName === 'JY' || componentName === 'NY'">
                <el-form-item  v-for="(item,index) in 9">
                    <VonBDUSelect v-model="form[`B${index+1}`]" :label="`B${index+1}`" width="80%" :options="PassageWays.NY" @change="($event)=>changeB($event,index+1)"></VonBDUSelect>
                </el-form-item>
            </template>
            <template v-if="componentName === 'JY' || componentName === 'NY'">
                <el-form-item  v-for="(item,index) in 9">
                    <VonBDUInputHorizon v-model="form[`pointB${index+1}`]" :label="`通道B${index+1}`"  disabled></VonBDUInputHorizon>
                </el-form-item>
            </template>

            <el-form-item class="submit" v-if="showFooter">
                <el-button type="primary" @click="onSubmit" size="mini">创建</el-button>
                <el-button size="mini" @click="cancelSubmit">取消</el-button>
            </el-form-item>
        </el-form>
        <div v-else style="margin: 0 20px">
            <slot name="content">

            </slot>
        </div>
    </el-drawer>
</template>

<script>
/*  powerSelection: "",
    climbTime: "",
    testTime: "",
    currentAddress:"",
    pcbaAddress: "",
    firmwareAddress:"",
    wayA: "",
    wayB:"",
    pointA: "",
    pointB: "",
    stepNumber:"",
    voltage: "",
    voltageUpper: "",
    voltageLower: "",
    current: "",
    currentUpper: "",
    currentLower:"",
    resistance:"",
    resistanceUpper:"",
    resistanceLower: "",
    resistanceMakeUp: "",
    capacitanceUpper: "",
    capacitanceLower: "",
    mode: "",*/
  import {mapState} from "vuex";

export default {
    name: "VonDrawer",
    data(){
      return{
        checkList:'',
        powerSelectionOptions:[
          {id:'DC',name:'DC'}, {id:'AC',name:'AC'}
        ],
        modeOptions:[
          {id:'I',name:'I'},
          {id:'R',name:'R'}
        ],
        modeOptions2:[
          {id:'OFF',name:'OFF'},
          {id:'ON',name:'ON'}
        ],
        Options_common:[
          {id:1,name:1},
          {id:2,name:2},
          {id:3,name:3},
          {id:4,name:4},
          {id:5,name:5},
          {id:6,name:6},
          {id:7,name:7},
          {id:8,name:8},
          {id:9,name:9},
          {id:10,name:10},
          {id:11,name:11},
          {id:12,name:12},
          {id:13,name:13},
          {id:14,name:14},
          {id:15,name:15},
          {id:16,name:16},
        ],
        form:{}
      }
    },
    props:{
      FormMode:{
        type:Boolean,
        default:true
      },
      showFooter:{
        type:Boolean,
        default:true
      },
      drawerTitle:{
        type:String,
        default:'新增'
      },
      componentName:{
        type:String,
      },
      addElementApi:{
        type:Function,
        default(){
          return new Promise(()=>{})
        }
      },
    },
    methods:{
      resetForm(){
        this.form = {
          entry:[]
        };
        this.$emit('handleClose');
      },
      onSubmit(){
        let formData = this.form;
        let ARR = [];
        for(let key in formData){
          if(key.includes('RELAY')){
            let Obj = {};
            Obj.wayType = '继电器';
            Obj.index = parseInt(key.slice(5,6));
            Obj.wayCode = parseInt(formData[key]);
            let arr = this.PassageWays.CG;
            let arrChild = arr.filter(item1111=>{
              return item1111.wayCode == formData[key]
            });
            Obj.wayValue = arrChild[0].relay + '';
            ARR.push(Obj);
            formData.entry = ARR;
          }
          if(key.startsWith('B')){
            let Obj = {};
            Obj.wayType = 'B';
            Obj.index = parseInt(key.slice(1,2));
            Obj.wayCode = parseInt(formData[key]) ;
            Obj.wayValue = formData[key] + "";
            ARR.push(Obj);
            formData.entry = ARR;
          }
        }
        this.$emit('getSubmitData',formData,this.componentName);
        this.resetForm();
      },
      cancelSubmit(){
        this.resetForm();
      },
      handleClose(){
        this.$emit('handleClose')
      },
      changePointA(value){
        this.form.wayA = parseInt(value);
      },
      changePointB(value){
        this.form.wayB = parseInt(value);
      },
      changeB(value,index){
        this.form[`pointB${index}`] = value;
      }
    },
    created() {
      this.resetForm();
    },
    computed:{
      ...mapState({
        PassageWays: state => state.base.PassageWays
      }),
    },

  }
</script>

<style scoped lang="scss">
    .submit{
        position: absolute;
        right: 26px;
        bottom: 20px;
    }
    .myForm{
        height: 600px;
        overflow-y: scroll;
        overflow-x: hidden;
    }
    /deep/.myForm{
        .el-form-item{
            .el-form-item__content{
                display: flex;
                align-items: center;
                margin-left: 0!important;
            }
        }
    }
</style>
